<template>
  <div class="line-wrap" :style="{ width: width, height: height }">
    <div class="line" ref="lineZoom"></div>
  </div>
</template>

<script>
/* eslint-disable */
import echarts from "echarts";
export default {
  props: {
    // toggleIndex: 0,   //  默认legend切换索引
    /* 
    isShowLegend: {
      type: Boolean,
      default: false,
    },
    legend: {
      type: Array,
      default: () => ["文档", "视频", "图片"],
    },
    xAxis: {
      type: Array,
      default: () => [
        { value: "2020/12/1" },
        { value: "2020/12/2" },
        { value: "2020/12/3" },
        { value: "2020/12/4" },
        { value: "2020/12/5" },
      ],
    },
    grid: {
      type: Object,
      default: () => {
        return {
          left: "4%",
          right: "4%",
          top: "10%",
          bottom: "3%",
          y2: 30,
          containLabel: true,
        };
      },
    },
    value: {
      type: Array,
      default: () => [
        [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
        [320, 460, 301, 334, 390, 550, 320, 100, 50],
        [320, 302, 464, 334, 390, 330, 320, 100, 50],
      ],
    },
    colors: {
      type: Array,
      default: () => ["rgb(254,109,98)", "rgb(190,56,226)", "rgb(62,163,213)"],
    },
    itemStyle: {
      type: Array,
      default: () => [
        {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(90, 141, 238, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(171, 196, 247, 1)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          barBorderRadius: [20, 20, 0, 0],
        },
        {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#1390c4", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0b3f69", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#4d69de",
            },
            {
              offset: 1,
              color: "#1b316f",
            },
          ]),
          barBorderRadius: 0,
        },
        {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#45a3d9",
            },
            {
              offset: 1,
              color: "#1b4772",
            },
          ]),
          barBorderRadius: 0,
        },
      ],
    },
     */
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    title: {
      text: "Beijing AQI",
      left: "1%",
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "5%",
      right: "15%",
      bottom: "10%",
    },
    xAxis: {
      data: data.map(function(item) {
        return item[0];
      }),
    },
    yAxis: {},
    toolbox: {
      right: 10,
      feature: {
        dataZoom: {
          yAxisIndex: "none",
        },
        restore: {},
        saveAsImage: {},
      },
    },
    dataZoom: [
      {
        startValue: "2014-06-01",
      },
      {
        type: "inside",
      },
    ],
    visualMap: {
      top: 50,
      right: 10,
      pieces: [
        {
          gt: 0,
          lte: 50,
          color: "#93CE07",
        },
        {
          gt: 50,
          lte: 100,
          color: "#FBDB0F",
        },
        {
          gt: 100,
          lte: 150,
          color: "#FC7D02",
        },
        {
          gt: 150,
          lte: 200,
          color: "#FD0100",
        },
        {
          gt: 200,
          lte: 300,
          color: "#AA069F",
        },
        {
          gt: 300,
          color: "#AC3B2A",
        },
      ],
      outOfRange: {
        color: "#999",
      },
    },
    series: {
      name: "Beijing AQI",
      type: "line",
      data: data.map(function(item) {
        return item[1];
      }),
      markLine: {
        silent: true,
        lineStyle: {
          color: "#333",
        },
        data: [
          {
            yAxis: 50,
          },
          {
            yAxis: 100,
          },
          {
            yAxis: 150,
          },
          {
            yAxis: 200,
          },
          {
            yAxis: 300,
          },
        ],
      },
    },
  },
  data() {
    return {
      option: null,
      chart: null,
    };
  },
  watch: {
    value() {
      this.setOptions();
    },
  },
  methods: {
    setOptions() {
      this.option = {
        title: this.title,

        /* grid: this.grid,
        title: {
          show: false,
          text: "对象名称统计情况",
          left: "middle",
          top: "0%",
          textStyle: {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 16,
          },
        },
        legend: {
          show: true,
          // icon: "rect",
          top: "0%",
          // left: "middle",
          itemWidth: 15,
          itemHeight: 15,
          // itemGap: 25,
          data: this.legend,
          textStyle: {
            fontSize: 14,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            type: "category",
            data: this.xAxis,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#ddd",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              rotate: 45,
              interval: 0,
              textStyle: {
                color: "#ffffff",
              },
              margin: 15,
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#ddd",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(75, 83, 106, 0.7)",
              },
            },
          },
        ],
        series: [], */
      };
      for (var i = 0; i < this.legend.length; i++) {
        this.option.series.push({
          name: this.legend[i],
          type: "line",
          data: this.value[i],
          symbolSize: 6,
          symbol: "circle",
          smooth: true,
          lineStyle: {
            color: this.colors[i],
          },
          itemStyle: {
            normal: {
              color: this.colors[i],
              borderColor: this.colors[i],
            },
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: this.colors[i],
              },
              {
                offset: 1,
                color: "rgba(47, 47, 47, 1)",
              },
            ]),
          },
          emphasis: {
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: this.colors[i],
                  },
                  {
                    offset: 0.4,
                    color: this.colors[i],
                  },
                  {
                    offset: 0.5,
                    color: "#fff",
                  },
                  {
                    offset: 0.7,
                    color: "#fff",
                  },
                  {
                    offset: 0.8,
                    color: "#fff",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ],
              },
              borderColor: this.colors[i],
              borderWidth: 2,
            },
          },
        });
      }
      this.chart.setOption(this.option);
    },
    //调用图表切换legend
    toggleLegend(toggleIndex) {
      this.chart.dispatchAction({
        type: "legendToggleSelect",
        // 图例名称
        name: this.legend[toggleIndex].name,
      });
    },
    //图表全选
    legendAllSelect() {
      this.chart.dispatchAction({
        type: "legendAllSelect",
      });
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.line);
    this.setOptions();
    window.onresize = () => {
      this.chart.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.line-wrap {
  width: 100%;
}
.line {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
</style>
